<script setup lang="ts">
import { computed } from 'vue'
import { ElCard, ElTag, ElButton, ElProgress, ElIcon, ElTooltip } from 'element-plus'
import { VideoPlay, VideoPause, Refresh, Delete, InfoFilled } from '@element-plus/icons-vue'
import type { Task } from '@/types'

interface Props {
  task: Task
}

const props = defineProps<Props>()

const emit = defineEmits<{
  start: [task: Task]
  pause: [task: Task]
  restart: [task: Task]
  delete: [task: Task]
  details: [task: Task]
}>()

const taskTypeColor = computed(() => {
  const colorMap = {
    post: 'primary',
    like: 'success',
    follow: 'warning',
    comment: 'info',
    share: 'danger'
  }
  return colorMap[props.task.type as keyof typeof colorMap] || 'info'
})

const statusColor = computed(() => {
  switch (props.task.status) {
    case 'running':
      return 'success'
    case 'completed':
      return 'primary'
    case 'failed':
      return 'danger'
    case 'paused':
      return 'warning'
    case 'pending':
      return 'info'
    default:
      return 'info'
  }
})

const statusText = computed(() => {
  const statusMap = {
    pending: '待执行',
    running: '执行中',
    paused: '已暂停',
    completed: '已完成',
    failed: '执行失败'
  }
  return statusMap[props.task.status] || '未知'
})

const taskTypeText = computed(() => {
  const typeMap = {
    post: '发布内容',
    like: '点赞',
    follow: '关注',
    comment: '评论',
    share: '分享'
  }
  return typeMap[props.task.type as keyof typeof typeMap] || '未知任务'
})

const progressPercentage = computed(() => {
  if (props.task.progress?.total) {
    return Math.round((props.task.progress.completed / props.task.progress.total) * 100)
  }
  return 0
})

const progressStatus = computed(() => {
  if (props.task.status === 'failed') return 'exception'
  if (props.task.status === 'completed') return 'success'
  return undefined
})

const canStart = computed(() => ['pending', 'paused'].includes(props.task.status))
const canPause = computed(() => props.task.status === 'running')
const canRestart = computed(() => ['completed', 'failed'].includes(props.task.status))
</script>

<template>
  <ElCard class="task-item" shadow="hover">
    <div class="task-header">
      <div class="task-info">
        <ElTag :type="taskTypeColor" size="small" class="task-type">
          {{ taskTypeText }}
        </ElTag>
        <span class="task-name">{{ task.name }}</span>
        <ElTooltip v-if="task.description" :content="task.description" placement="top">
          <ElIcon class="info-icon"><InfoFilled /></ElIcon>
        </ElTooltip>
      </div>
      <ElTag :type="statusColor" size="small">
        {{ statusText }}
      </ElTag>
    </div>

    <div class="task-body">
      <div class="task-details">
        <p><strong>目标账号:</strong> {{ task.accountId || '全部' }}</p>
        <p><strong>执行设备:</strong> {{ task.deviceId || '自动分配' }}</p>
        <p v-if="task.scheduledAt"><strong>计划时间:</strong> {{ new Date(task.scheduledAt).toLocaleString() }}</p>
        <p v-if="task.startedAt"><strong>开始时间:</strong> {{ new Date(task.startedAt).toLocaleString() }}</p>
        <p v-if="task.completedAt"><strong>完成时间:</strong> {{ new Date(task.completedAt).toLocaleString() }}</p>
      </div>

      <div v-if="task.progress" class="task-progress">
        <div class="progress-header">
          <span>执行进度</span>
          <span>{{ task.progress.completed }}/{{ task.progress.total }}</span>
        </div>
        <ElProgress
          :percentage="progressPercentage"
          :status="progressStatus"
          :stroke-width="8"
        />
      </div>

      <div class="task-actions">
        <ElButton
          v-if="canStart"
          type="primary"
          size="small"
          :icon="VideoPlay"
          @click="emit('start', task)"
        >
          {{ task.status === 'paused' ? '继续' : '开始' }}
        </ElButton>

        <ElButton
          v-if="canPause"
          type="warning"
          size="small"
          :icon="VideoPause"
          @click="emit('pause', task)"
        >
          暂停
        </ElButton>

        <ElButton
          v-if="canRestart"
          type="info"
          size="small"
          :icon="Refresh"
          @click="emit('restart', task)"
        >
          重新执行
        </ElButton>

        <ElButton
          type="info"
          size="small"
          :icon="InfoFilled"
          @click="emit('details', task)"
        >
          详情
        </ElButton>

        <ElButton
          type="danger"
          size="small"
          :icon="Delete"
          @click="emit('delete', task)"
        >
          删除
        </ElButton>
      </div>
    </div>
  </ElCard>
</template>

<style scoped lang="scss">
.task-item {
  .task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    
    .task-info {
      display: flex;
      align-items: center;
      gap: 8px;
      
      .task-name {
        font-weight: 600;
        font-size: 14px;
        color: var(--el-text-color-primary);
      }
      
      .info-icon {
        color: var(--el-color-info);
        cursor: pointer;
        font-size: 14px;
      }
    }
  }
  
  .task-body {
    .task-details {
      margin-bottom: 16px;
      
      p {
        margin: 4px 0;
        font-size: 13px;
        color: var(--el-text-color-regular);
        
        strong {
          color: var(--el-text-color-primary);
        }
      }
    }
    
    .task-progress {
      margin-bottom: 16px;
      
      .progress-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        font-size: 13px;
        color: var(--el-text-color-regular);
      }
    }
    
    .task-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
  }
}

@media (max-width: 768px) {
  .task-item {
    .task-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      
      .task-info {
        width: 100%;
        justify-content: space-between;
      }
    }
    
    .task-body {
      .task-actions {
        justify-content: space-between;
        
        .el-button {
          flex: 1;
          min-width: 70px;
        }
      }
    }
  }
}
</style>